<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计划本</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: #F56C6C;
        }

        body {
            background: #F56C6C;
        }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-link type="info" href="../options/options.html">回到首页<i class="el-icon-view el-icon--right"></i> </el-link>
        <br>
        <h1 style="width: 500px;color: white">欢迎，亲爱的<i>{{params.realName}}</i></h1>
        <span v-show="contentNotNull">
        <h2 style="color:gold;">正在执行计划：{{scheduleContent}}</h2>
        <h2 style="color:gold;">还剩：{{leftTimeStr}}</h2>
        </span>
        <span v-show="contentNull">
        <h2 style="color:gold;">暂无正在执行计划</h2>
        </span>
        <el-divider></el-divider>
        <el-button style="width: 500px;height: 80px" type="primary" @click="addSchedule"><h1>新增计划</h1></el-button>
        <br><br>
        <el-button style="width: 500px;height: 80px" type="primary" @click="manageSchedule"><h1>计划分类</h1></el-button>
        <br><br>
        <el-button style="width: 500px;height: 80px" type="primary" @click="querySchedule"><h1>计划查询</h1></el-button>
        <br><br>
        <el-button style="width: 500px;height: 80px" type="primary" @click="countSchedule"><h1>计划统计</h1></el-button>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            params: {
                username: "",
                realName: "",
                now: ""
            },
            scheduleContent: "",
            leftTime: "",
            leftTimeStr: "",
            contentNotNull: false,
            contentNull: true
        },
        methods: {
            dealCookie() {
                // 对cookie操作
                var cookies = document.cookie;
                var cookie_array = cookies.split(";");
                for (var i = 0; i < cookie_array.length; i++) {
                    var cookie = cookie_array[i];
                    var array = cookie.split("=");
                    if (array[0] == "realName") {
                        this.params.realName = array[1];
                    }
                    if (array[0] == " username") {
                        this.params.username = array[1];
                    }
                }
            },
            getNow() {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                if (month < 10) {
                    month = "0" + month;
                }
                var day = date.getDate();
                if (day < 10) {
                    day = "0" + day;
                }
                var hour = date.getHours();
                if (hour < 10) {
                    hour = "0" + hour;
                }
                var minute = date.getMinutes();
                if (minute < 10) {
                    minute = "0" + minute;
                }
                var second = date.getSeconds();
                if (second < 10) {
                    second = "0" + second;
                }
                this.params.now = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
            },
            queryNowSchedule() {
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/queryNowSchedule', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    this.scheduleContent = response.data.scheduleContent;
                    if ( this.scheduleContent !== null && this.scheduleContent !== "" && this.scheduleContent !== undefined){
                        this.contentNotNull = true;
                        this.contentNull = false;
                    }
                    this.leftTime = response.data.leftTime;
                    let seconds = this.leftTime;
                    let hour = 0;
                    let minute = 0;
                    if (seconds > 60 * 60) {
                        hour = parseInt(seconds / (60 * 60));
                        minute = parseInt((seconds - hour * 60 * 60) / 60);
                        seconds = seconds % 60;
                        this.leftTimeStr = hour + "小时" + minute + "分" + seconds + "秒";
                    } else if (seconds > 60) {
                        minute = seconds / 60;
                        seconds = seconds % 60;
                        this.leftTimeStr = parseInt(minute) + "分" + seconds + "秒";
                    } else {
                        this.leftTimeStr = seconds + "秒";
                    }
                });
            },
            dealLeftTimeStr() {
                let seconds = this.leftTime;
                let hour = 0;
                let minute = 0;
                if (seconds > 60 * 60) {
                    hour = parseInt(seconds / (60 * 60));
                    minute = parseInt((seconds - hour * 60 * 60) / 60);
                    seconds = seconds % 60;
                    this.leftTimeStr = parseInt(hour) + "小时" + parseInt(minute) + "分" + seconds + "秒";
                } else if (seconds > 60) {
                    minute = seconds / 60;
                    seconds = seconds % 60;
                    this.leftTimeStr = parseInt(minute) + "分" + seconds + "秒";
                } else {
                    this.leftTimeStr = seconds + "秒";
                }
            },
            dealLeftTime() {
                if (this.leftTime <= 0) {
                    clearInterval(this.timer);
                    this.leftTimeStr = 0;
                }
                this.leftTime = this.leftTime - 1;
                this.dealLeftTimeStr();
            },
            addSchedule() {
                window.location.href = "addSchedules.html";
            },
            querySchedule() {
                window.location.href = "querySchedules.html";
            },
            countSchedule() {
                window.location.href = "countSchedule.html";
            },
            manageSchedule() {
                this.$prompt('请输入新增计划类型', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    if (value === null || value === "" || value === undefined){
                        this.$message({
                            type: 'error',
                            message: '计划类型不可为空！'
                        });
                        return;
                    }
                    axios.post('https://3723r72n06.picp.vip/mylife/schedule/addScheduleType', value, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                        if (response.data.code == 200) {
                            this.$message.success(response.data.msg);
                        } else if (response.data.code !== 200) {
                            this.$message.warning(response.data.msg);
                        }
                    });
                })
            }
        },
        created() {
            this.dealCookie();
            this.getNow();
            this.queryNowSchedule();
            this.timer = setInterval(this.dealLeftTime, 1000);
        }
    });
</script>
</html>